<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商家登录</title>
    <style>
      html {
        height: 100%;
        font-size: 17px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      }
      body {
        /*background-image: url("./img/bg.jpg");*/
        background-image: url("/img/bg.jpg");
        background-repeat: no-repeat;
        background-size: cover;
      }
      h2 {
        text-align: center;
        font-size: 1.2rem;
        font-weight: normal;
        letter-spacing: 0.1em;
        line-height: 1.8em;
        color: #707070;
      }
      .login-box {
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        left: 50%;
        top: 42%;
        transform: translate(-50%, -50%);
        padding: 20px 54px 60px;
        border-radius: 10px;
        box-sizing: border-box;
        box-shadow: 0 0 20px 0 #0000003c;
      }
      .login-item {
        display: flex;
        align-items: stretch;
        outline: 1px solid #cccccc;
        background-color: inherit;
        margin: 10px 0;
        border-radius: 3px;
        width: 240px;
      }
      .login-item:focus-within,
      .login-item:focus-within {
        outline: 1px solid #409eff;
        background-color: #ffffffbb;
      }

      .login-item svg.icon {
        vertical-align: middle;
        transform: translateY(3px);
        padding: 0 8px;
        fill: #aaaaaa;
      }
      input::placeholder {
        color: #aaaaaa;
      }
      .login-item input[type="text"],
      .login-item input[type="password"] {
        flex-grow: 1;
        padding: 8px 0;
        font-family: monospace;
        font-size: 0.9rem;
        outline: none;
        border-radius: 2px;
        border: none;
        box-sizing: border-box;
        vertical-align: middle;
        background-color: transparent;
      }
      input[type="submit"] {
        font-size: 0.9em;
        background-color: #409eff;
        color: #ffffff;
        border: none;
        border-radius: 3px;
        width: 240px;
        padding: 8px 0;
        margin-top: 20px;
      }
      input[type="submit"]:active {
        background-color: #3a8ee6;
      }
    </style>
  </head>
  <body>
    <form
      th:action="@{/exchange/login/{coupons_item_id}(coupons_item_id=${coupons_item_id})}"
      method="post"
      class="login-box"
    >
      <h2>宜宾青年积分商城<br />商家登录</h2>
      <div class="login-item">
        <label for="username">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 130 130"
            class="icon"
            width="16"
            height="16"
          >
            <path
              d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z"
              stroke="#979797"
            ></path>
          </svg>
        </label>
        <input type="text" name="username" id="username" placeholder="用户名" />
      </div>
      <div class="login-item">
        <label for="password">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            class="icon"
            viewBox="0 0 1024 1024"
            width="16"
            height="16"
          >
            <path
              d="M868.593046 403.832442c-30.081109-28.844955-70.037123-44.753273-112.624057-44.753273L265.949606 359.079168c-42.554188 0-82.510202 15.908318-112.469538 44.690852-30.236652 28.782533-46.857191 67.222007-46.857191 108.198258l0 294.079782c0 40.977273 16.619516 79.414701 46.702672 108.136859 29.959336 28.844955 70.069869 44.814672 112.624057 44.814672l490.019383 0c42.585911 0 82.696444-15.969717 112.624057-44.814672 30.082132-28.844955 46.579875-67.222007 46.579875-108.136859L915.172921 511.968278C915.171897 471.053426 898.675178 432.677397 868.593046 403.832442zM841.821309 806.049083c0 22.098297-8.882298 42.772152-25.099654 58.306964-16.154935 15.661701-37.81935 24.203238-60.752666 24.203238L265.949606 888.559285c-22.934339 0-44.567032-8.54256-60.877509-24.264637-16.186657-15.474436-25.067932-36.148291-25.067932-58.246589L180.004165 511.968278c0-22.035876 8.881274-42.772152 25.192775-58.307987 16.186657-15.536858 37.81935-24.139793 60.753689-24.139793l490.019383 0c22.933315 0 44.597731 8.602935 60.752666 24.139793 16.21838 15.535835 25.099654 36.272112 25.099654 58.307987L841.822332 806.049083zM510.974136 135.440715c114.914216 0 208.318536 89.75214 208.318536 200.055338l73.350588 0c0-149.113109-126.366036-270.496667-281.669124-270.496667-155.333788 0-281.699824 121.383558-281.699824 270.496667l73.350588 0C302.623877 225.193879 396.059919 135.440715 510.974136 135.440715zM474.299865 747.244792l73.350588 0L547.650453 629.576859l-73.350588 0L474.299865 747.244792z"
              p-id="2751"
            ></path>
          </svg>
        </label>
        <input
          type="password"
          name="password"
          id="password"
          placeholder="密码"
        />
      </div>
      <div th:text="${errMsg}" style="color: red"></div>
      <input type="submit" value="登 录" />
    </form>
  </body>
</html>
